<template>
    <view class="padding-bj">
        <view class="info u-flex" @click="$wanlshop.to('info/info')">
            <view class="avatar">
                <image :src="$wanlshop.oss(info.avatar, 120,120,2,'avatar')" mode="" class="avatar"></image>
            </view>
            <view class="name-wrap u-m-l-24">
                <view class="name">{{ info.shopname ? info.shopname : '我的小店' }}</view>
                <view class="tips">点击头像可设置店铺资料</view>
            </view>
        </view>

        <view class="statistics u-m-t-42 padding-bj">
            <view class="pirce-wrap">
                <view class="title">总交易额(元)</view>
                <view class="value">{{ statistics.actual_payment }}</view>
            </view>

            <view class="items u-m-t-24 u-flex u-row-between u-col-top">
                <view class="item">
                    <view class="title">订单数</view>
                    <view class="value">{{ statistics.now_order_num }}</view>
                    <view class="before">昨日 {{ statistics.yesterday_order_num }}</view>
                </view>

                <view class="item">
                    <view class="title">今日交易额</view>
                    <view class="value">{{ statistics.now_order_price }}</view>
                    <view class="before">昨日 {{ statistics.yesterday_order_price }}</view>
                </view>

                <view class="item">
                    <view class="title">访问数</view>
                    <view class="value">{{ statistics.now_visits_number }}</view>
                    <view class="before"></view>
                </view>
            </view>
        </view>

        <view class="grid col-3 u-m-t-24">
            <view class="item">
                <view class="title">我的收入</view>
                <view class="value">{{ statistics.now_income }}</view>
                <view class="before">昨日 {{ statistics.yesterday_income }}</view>
            </view>

            <view class="item">
                <view class="title">今日支出</view>
                <view class="value">{{ statistics.now_expenditure }}</view>
                <view class="before">昨日 {{ statistics.yesterday_expenditure }}</view>
            </view>

            <view class="item">
                <view class="title">下级人数</view>
                <view class="value">{{ statistics.now_expenditure }}</view>
                <view class="before"></view>
            </view>

            <view class="item">
                <view class="title">加购人数</view>
                <view class="value">{{ statistics.now_cart }}</view>
                <view class="before">昨日 {{ statistics.yesterday_cart }}</view>
            </view>

            <view class="item">
                <view class="title">支付买家</view>
                <view class="value">{{ statistics.now_pay }}</view>
                <view class="before">昨日 {{ statistics.yesterday_pay }}</view>
            </view>

            <view class="item">
                <view class="title">支付转化率</view>
                <view class="value">{{ statistics.now_pay_proportion }}</view>
                <view class="before">昨日 {{ statistics.yesterday_pay_proportion }}</view>
            </view>
        </view>


            <view class="btn-wrap u-flex u-col-center u-row-center u-m-t-24 btns">
                <view class="btn white u-flex-1" @tap="$wanlshop.auth('/pages/m-shop/me/money/money')">账户资金</view>
                <view class="btn u-flex-1 u-m-l-24" @tap="$wanlshop.auth('/pages/m-shop/me/order/order')">订单管理</view>
            </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                info: {},
                statistics: {}
            };
        },
        onLoad(options) {},
        onShow() {
            this.$api.get({
                url: '/store/store/storeinfo',
                success: res => {
                    this.info = res.shopAuth;
                    this.statistics = res.statistics;
                }
            });
        },
        methods: {}
    };
</script>

<style lang="scss" scoped>
    @import "@/all.scss";
	.btns{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 24rpx;
		background: #ffffff;
	}
    .info {
        .avatar {
            width: 100rpx;
            height: 100rpx;
            border-radius: 100rpx;
            border: 2rpx solid;
        }
    }

    .btn {
        height: 80rpx;
        background: #5480FB;
        border-radius: 8rpx;

        font-weight: 700;
        font-size: 32rpx;
        color: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;

        &.white {
            background: #FFFFFF;
            color: #616161;
        }
    }

    .info {
        .avatar {
            width: 120rpx;
            height: 120rpx;
            background: #D8D8D8;
            border: 4rpx solid #FFFFFF;
        }

        .name {
            font-weight: 500;
            font-size: 36rpx;
            color: #333333;
        }

        .tips {
            font-weight: 500;
            font-size: 24rpx;
            color: #999999;
        }
    }

    .statistics {
        background: #3065FA;
        border-radius: 20rpx;
        color: #ffffff;

        .pirce-wrap {
            .title {
                font-weight: 400;
                font-size: 36rpx;
                line-height: 52px;
            }

            .value {
                font-weight: 700;
                font-size: 72rpx;
                color: #FFFFFF;
                line-height: 104rpx;
            }
        }

        .items {
            .item {
                text-align: center;

                font-weight: 400;
                font-size: 26rpx;
                color: #FFFFFF;
                line-height: 38rpx;

                .value {
                    font-weight: 700;
                    font-size: 36rpx;
                    color: #FFFFFF;
                    line-height: 52rpx;
                }
            }
        }


    }

    .grid {
        .item {
            padding: 20rpx;
            border-radius: 20rpx;
            background: #D9E3FE;

            &:not(:nth-child(3n+1)) {
                margin-left: 16rpx;
            }

            &:not(:nth-child(-n+3)) {
                margin-top: 16rpx;
            }

            width: calc((100% - 32rpx)/3);

            font-weight: 500;
            font-size: 24rpx;
            color: #757575;
            line-height: 34rpx;

            .value {
                font-weight: 700;
                font-size: 32rpx;
                color: #333333;
                line-height: 46rpx;
            }
        }
    }
</style>